<template>
	<view class="personOrcompanyDetail">
		<view class="mT30">
			<view class="relative topCompany  radius20 mL15 pL15 pB15 pR15 pT15 mR15"
				:style="`background:url(${resources.companyBg})`">
				<view class="flex alg-center jst-between">
					<u-image :width="130" :height="130" class="headerImg" v-if="info?.comProfile"
						:src="xf.getImgUrl(info?.comProfile)" mode=""></u-image>
					<image class="headerImg" v-else :src="resources.defaultHeader" mode=""></image>
					<view class="flex alg-center callBox" @click="phoneLink">
						<image class="callPhoneImg" :src="resources.bluePhone" mode=""></image>
						<text class="u-blue font12 bold">打电话</text>
					</view>
				</view>
				<view class="font20  bold">{{info?.comName}}</view>
				<view class="flex jst-between alg-center mT10">
					<view class="bg-ea radius10 pL5 pR5 line20">
						<image class="imgW24" :src="resources.jgGsIcon" mode=""></image>
						<text class="font13 mL5 u-blue">监管认证</text>
					</view>

				</view>




			</view>
		</view>
		<view class="mT15 mL15 mR15">
			<view class="u-3 font18 bold mB15">基本信息</view>
			<view class="radius20 bgf pT15 pB15 pL15 pR15">
				<view class="font13 u-9">联系人</view>
				<view class="u-3 font15 mT5">{{info?.comContacts}}</view>
				<view class="font13 u-9 mT10">联系电话</view>
				<view class="u-3 font15 mT5">{{info?.comContactsPhone}}</view>
				<!-- <view class="font13 u-9 mT10">注册资金</view>
				<view class="u-3 font15 mT5">**万</view>
				<view class="font13 u-9 mT10">经营状态</view>
				<view class="u-3 font15 mT5">续存</view> -->

			</view>
		</view>

		<view class="mL15 mR15 mT10">

			<view class="mT15">
				<view>
					<view class="font18 bold mB10">公司地址</view>
					<view class=" radius20 bgf  pT15 pB15 pL12 pR12">

						<map class='map' :latitude="info?.comLatitude" :longitude="info?.comLongitude" :scale='16'>
							<cover-view class="imgMapBg" v-show="showMapTip">
								<cover-view class="arrowDown font12 t-center">{{info?.comName}}</cover-view>
							</cover-view>
						</map>

						<view class="mT10">
							<view class="flex jst-between alg-center">
								<view class="flex alg-center">
								
									<u-image :width="32" :height="32" :src="resources.posIcon" ></u-image>
									<text
										class="mL5 font15 u-3">{{info?.provinceName}}-{{info?.cityName}}-{{info?.areaName}}</text>
								</view>
								<view @click.stop="xf.openMap({lat:info?.comLatitude,lon:info?.comLongitude,address:info?.comBelongAddress})">
									<u-image :width="48" :height="48" :src="resources.route" ></u-image>
								</view>
							</view>
							<view class="flex alg-center jst-between mT5">
								<view class="u-8bd font13  w80">
									{{info?.comBelongAddress}}
								</view>
								<view class="u-6 font13">
									{{info?.distance}}
								</view>
							</view>
						</view>
						
					</view>

				</view>

			</view>
			<!-- 企业基本信息结束 -->

		</view>

		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import {
		getCompanyInfo
	} from "@/api/userInterface/job.js"
	import { getPhone } from "@/api/userInterface/job"
	export default {
		data() {
			return {
				info: {},
				showMapTip:true
			};
		},
		onShow() {
			this.showMapTip = true;
		},
		onLoad(e) {
			this.getCompany(e.id)
		},
		methods: {
			async getCompany(id){
				const {lat,lon} = await this.xf.getLatOrLon()
				getCompanyInfo({
					companyId: id,
					longitude: lon,
					latitude: lat
				}).then(res => {
					this.info = res.result
				})
				
			},
			callNumber() {
				let id = this.info.id;
				this.xf.callPhone({
					acquirerId: id
				})
			},
			phoneLink() {
				let that = this;
				this.showMapTip=false;
				if (this.xf.isLogin()) {
					let authStatus = uni.getStorageSync('authStatus')
					if (authStatus && authStatus != 0) {
						getPhone({
							acquirerId: that.info.id
						}).then(res => {
							const {result} = res
							if (result.code && result.code == 201){
								let htmlStr = `<p class="mT10">拨打电话需支付<span class="u-red">2元</span></p>`
								this.$refs.tipModal.open({
									slotHtml: htmlStr,
									btnText: "拨打",
									showCancel: true,
									success: function() {
										that.xf.jumpPayPage(`acquirerId=${that.info.id}`)
									}
								})
							} else {
								this.$refs.tipModal.open({
									content: "确认拨打电话吗？",
									btnText: "拨打",
									showCancel: true,
									success: function() {
										that.callNumber()
									}
								})
							}	
						})
					} else {
						this.$refs.tipModal.open({
							content: "您还未进实名认证，请先实名认证？",
							btnText: "去认证",
							close() {
								that.showMapTip=true;
							},
							showCancel: true,
							success: function() {
								uni.navigateTo({
									url: "/pages/userPage/subpackge/my/smrz/smrz"
								})
							}
						})
					}
				} else {
					this.$refs.tipModal.open({
						content: "您还未登录,请先登录",
						btnText: "去登录",
						close() {
							that.showMapTip=true;
						},
						showCancel: true,
						success: function() {
							that.xf.fungoPreviousPage()
							uni.navigateTo({
								url: "/pages/login/login"
							})
							
						}
					})
				}
			
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.morePjHeaderBox {
		width: 100rpx;
	}
	.imgMapBg {
		
		
		max-width: 300rpx;
		width: auto;
		padding-bottom: 30rpx;
		// height: 100rpx;
		// line-height: 80rpx;
		font-weight: bold;
		position: relative;
		top: 60%;
		left: 50%;
		transform: translate(-50%, calc(-50% - 60rpx));
		z-index: 10;
		.arrowDown{
			border-radius: 20rpx;
			background: #fff;
			padding: 20rpx 20rpx;
			&:after {
				position: absolute;
				bottom: 8rpx;
				content: "";
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-top: 24rpx solid #fff;
				/* 你可以根据需要更改颜色和大小 */
			}
		}
		
	}
	
	.imgFm {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.personOrcompanyDetail {
		min-height: 100%;
		// background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
		padding-bottom: 60rpx;
	}

	
	.map {
		width: 100%;
		height: 242rpx;
	}

	.companyPic {
		width: 202rpx;
		height: 202rpx;
		margin-right: 20rpx;

		&:nth-child(3) {
			margin-right: 0;
		}

		margin-bottom: 20rpx;
	}

	#scroll-view-h {
		padding-bottom: 60rpx;
	}

	.posImg {
		width: 24rpx;
		height: 28rpx;
	}

	.topInfo {
		background: #F7FBFF;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.bgImg {
		position: fixed;
		width: 100%;
		z-index: 0;
		top: 0;
		/* #ifdef MP-WEIXIN */
		top: 100rpx;
		/* #endif */
	}

	.headerImg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 20rpx;
		margin-top: -80rpx;
		position: relative;
	}

	.topCompany {
		// background-image: url('~@/static/image/userImg/companyBg.png');
		background-size: 100% 100% !important;
	}

	.callBox {
		background: #EAF4FE;
		border-radius: 27rpx;
		height: 54rpx;
		padding: 0 20rpx;

		.callPhoneImg {
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>